<template>
  <layout-body v-loading="initLoading">
    <div class="theme-body">
      <div class="theme-list">
        <template v-for="(item, index) in diyData" :key="index">
          <div
            class="theme-item"
            :class="activeTheme == item.theme ? 'active' : ''"
            @click="selectedTheme(item, index)"
          >
            <div class="item-items">
              <div
                class="item-host-bg"
                :style="`background: ${item.data.host_bg}`"
              ></div>
              <div
                class="item-deputy-bg"
                :style="`background: ${item.data.deputy_bg}`"
              ></div>
            </div>
            <!-- <div class="item-title">{{ item.title }}</div> -->
          </div>
        </template>
      </div>
      <div class="theme-layout-list">
        <template v-for="(item, index) in itemImgs" :key="index">
          <div class="theme-layout-item">
            <img :src="item" />
          </div>
        </template>
      </div>
      <div class="diy-save">
        <el-button type="primary" @click="saveClick" :loading="btnLoading"
          >保存</el-button
        >
      </div>
    </div>
  </layout-body>
</template>
  <script lang="ts" setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { getDiyTheme, updateDiyTheme } from "@/api/store/diy_page";
import { Result, ResultError } from "@/types";

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

// const activeItem = ref<>()

interface diyTypeObj {
  theme: string;
  data: {
    deputy_bg?: string;
    deputy_color?: string;
    host_bg?: string;
    host_bg2?: string;
    host_color?: string;
  };
  img: string[];
}

const diyData = ref<Array<diyTypeObj>>([]);

const activeTheme = ref<number | string>("");

const itemImgs = ref<string[]>([]);

const initLoading = ref<boolean>(true);

const toInitDiyData = () => {
  initLoading.value = true;
  getDiyTheme()
    .then((res: Result) => {
      diyData.value = res.data.data;
      activeTheme.value = res.data.theme;
      initActive();
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
      initLoading.value = false;
    });
};

const initActive = () => {
  diyData.value.forEach((item: diyTypeObj, index: number) => {
    if (activeTheme.value == item.theme) {
      itemImgs.value = item.img;
    }
  });
  initLoading.value = false;
};

const selectedTheme = (item: diyTypeObj, index: number) => {
  activeTheme.value = item.theme;
  initActive();
};
const btnLoading = ref<boolean>(false);

const saveClick = () => {
  btnLoading.value = true;
  updateDiyTheme({ theme: activeTheme.value })
    .then((res: Result) => {
      $utils.successMsg(res.message);
      btnLoading.value = false;
    })
    .catch((err: ResultError) => {
      btnLoading.value = false;
      $utils.errorMsg(err);
    });
};

onMounted(() => {
  toInitDiyData();
});
</script>
  
  
  <style scoped>
.theme-body {
  max-width: 1500px;
  margin: 30px auto;
}
.theme-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.theme-item {
  cursor: pointer;
  margin-right: 20px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  user-select: none;
  width: calc(100% / 5 - 64px);
  min-width: 120px;
  border: 2px solid var(--el-border-color-lighter);
  height: 50px;
  padding: 20px;
  border-radius: var(--base-radius);
}

.theme-list .theme-item .item-items {
  display: flex;
  justify-content: space-around;
}
.theme-list .item-items > div {
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.theme-list .item-host-bg {
  width: 50px;
  height: 50px;
}
.theme-item.active {
  border-color: var(--base-default);
}

.theme-layout-list {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.theme-layout-item {
  margin-right: 20px;
  margin-bottom: 20px;
  border: 2px solid #f0f0f0;
  width: calc(20% - 24px);
  max-width: 300px;
  cursor: pointer;
  border-radius: var(--base-radius);
}
.theme-layout-item img {
  width: 100%;
}

.diy-save {
  width: 100%;
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
</style>